<template>
  <div class="login-wrap">
    <div class="bg">
      <img src="@renderer/assets/bg-daa6ee4f.svg" alt="My Happy SVG" />
    </div>
    <div class="wrapper">
      <div class="login">
        <div class="auth">
          <div class="desc">
            <h1 class="welcome">欢迎回来～</h1>

            <div style="font-size: 14px" v-if="noticeHtml">
              <div v-html="noticeHtml"></div>
            </div>
            <div v-else>
              <p style="line-height: 28px">很高兴再次见到您!</p>
            </div>
          </div>
          <div class="form">
            <p style="font-size: 12px; text-align: left; color: #c2c2c2; margin-bottom: 6px">
              请输入授权登陆码<span style="color: red">*</span>
            </p>
            <input v-model="code" class="code-input" placeholder="请输入授权码" />
            <button class="login-btn" @click="loginHandler">
              {{ loginLoading ? '登录中...' : '登录' }}
            </button>
            <!-- <p style="font-size: 12px; color: #c2c2c2; text-align: left; margin-top: 8px">
              不会使用Midjourney?
              <a
                style="color: #409eff; cursor: pointer"
                href="https://fia4ernqvtt.feishu.cn/docx/Ke9Cdk0iuoOUL9x97l0cxpmtnbb"
                target="_blank"
                >查看使用教程
              </a>
            </p> -->
          </div>
        </div>
        <div class="qrCode">
          <div class="code-div"><img src="http://mjap.marsai999.com/wechat.jpg" /></div>
          <h1 class="add-wechat">加客服微信</h1>
          <p>反馈建议，合作请加微信</p>
          <p>使用问题请直接联系店铺客服</p>
          <p>(8:30-24:00)</p>
        </div>
      </div>

      <div
        class="wrapper-foot"
        :class="{
          'sign-error': !netWordStatus
        }"
      >
        <ul class="sign">
          <li v-for="i in 3" :key="i"></li>
        </ul>
        <span>网络连接{{ netWordStatus ? '正常' : '异常' }}</span>
        <span style="padding-left: 6px; color: #409eff; cursor: pointer" @click="refreshNetword">
          {{ loading ? '检测中...' : '刷新' }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ipc } from '../utils/index.js'

const scode = window.localStorage.getItem('__code__') // 授权码
const code = ref(scode ? JSON.parse(scode) : '')
const netWordStatus = ref(false)
const loading = ref(false)
const loginLoading = ref(false)
const router = useRouter()
const session = window.localStorage.getItem('__session__')
const noticeHtml = ref('')

const loginHandler = () => {
  if (!netWordStatus.value) {
    window.alert('请检查是否开启魔法或网络是否正常')
    return
  }
  if (loginLoading.value) return
  loginLoading.value = true
  const key = code.value.trim()
  ipc.send('login', {
    key,
    isLogin: true,
    session
  })
}

const refreshNetword = () => {
  if (loading.value) return
  loading.value = true
  ipc.send('getNetworkStatus')
}

refreshNetword()

// 监听登录结果
ipc.on('login-result', (e, arg) => {
  loginLoading.value = false
  const { success, data: content } = arg
  const { data } = content
  if (success && data.status) {
    window.localStorage.setItem('__code__', JSON.stringify(data.key))
    router.push('/main')
  } else {
    window.alert('账号不存在')
  }
})

// 监听配置文件
const getSystemConfig =(e, arg) => {
  noticeHtml.value = arg?.content || ''
}

ipc.on('get-system-config', getSystemConfig)

const networkStatus =(e, arg) => {
  loading.value = false
  netWordStatus.value = arg.connected
}

// 网络状态
ipc.on('networkStatus', networkStatus)

// 关闭窗口操作
const setGuildChannel = () => {
  ipc.send('set-guild-channel', {})
}

ipc.on('get-guild-channel', setGuildChannel)

onBeforeUnmount(() => {
  ipc.off('get-guild-channel', setGuildChannel)
  ipc.off('networkStatus', networkStatus)
  ipc.off('get-system-config', getSystemConfig)
})
</script>
